<template>
  <div>
    <div class="banner">
      <div class="wp1630">
        <div class="ban-txt">
          <div class="left">
            <div class="tit">共享<br />价值<br />生命力</div>
          </div>
          <div class="center">
            <div class="txt">
              <b>Silentber</b
              >是一个去中心化的出版发行平台，作者将版权存储在区块链上发售，获得版权的读者享有版权收益，获得电子书和纸质书的打印权。收益权可以转赠、转售、升级等。
            </div>
          </div>
          <div class="right">
            <NuxtLink to="/question"  class="m-btnb1">查看详情</NuxtLink>
          </div>
        </div>
      </div>
      <div class="wp1775">
        <div class="swiper-container" id="bannerSwiper">
          <div class="swiper-wrapper">
            <div
              class="swiper-slide"
            
            >
              <div class="pic">
                <img src="/images/PosterCN.gif" alt="" />
              </div>
            </div>
            <div
              class="swiper-slide"
            
            >
              <div class="pic">
                <img src="/images/c-ban.png" alt="" />
              </div>
            </div>
          </div>
          <!--  <div class="swiper-button-prev"></div>
          <div class="swiper-button-next"></div> -->
          <div class="swiper-pagination"></div>
        </div>
      </div>
    </div>
    <!-- 是Silentberry的核心理念 -->
    <div class="row-a1">
      <div class="wp1630">
        <div class="g-titb1">
          <div class="l">
            <div class="h3">共享<br />是Silentberry的核心理念</div>
          </div>
        </div>
        <div class="m-txtb1">
          作品版权的收益权被转化为金浆果、银浆果、铜浆果和蓝莓这四种权利，并分阶段发行。作家和读者在这里共享权利和收益，形成了一种前所未有的共生关系：作家提供作品，读者提供流动性。
        </div>

        <ul class="b-list1 fix">
          <li @click="gotoInfo('什么是金浆果')">
            <div class="con">
              <div class="icon">
                <img src="/images/c-i1.png" alt="" />
              </div>
              <div class="box">
                <div class="tit">金浆果的神话</div>
                <div class="desc">
                  金浆果是第一阶段的发行，少量的份额被眼光独到的早期读者获得。
                </div>
                <i class="arr"><right-outlined /></i>
              </div>
            </div>
          </li>
          <li @click="gotoInfo('什么是银浆果')">
            <div class="con">
              <div class="icon"><img src="/images/c-i2.png" alt="" /></div>
              <div class="box">
                <div class="tit">银浆果的扩展</div>
                <div class="desc">
                  银浆果是第二阶段的发行，更多人能够购买到版权收益权。
                </div>
                <i class="arr"><right-outlined /></i>
              </div>
            </div>
          </li>
          <li @click="gotoInfo('什么是铜浆果')">
            <div class="con">
              <div class="icon"><img src="/images/c-i3.png" alt="" /></div>
              <div class="box">
                <div class="tit">铜浆果的普及</div>
                <div class="desc">
                  铜浆果是第三阶段的发行，提高了图书的市场流动性。
                </div>
                <i class="arr"><right-outlined /></i>
              </div>
            </div>
          </li>
          <li @click="gotoInfo('什么是蓝莓浆果')">
            <div class="con">
              <div class="icon"><img src="/images/c-i4.png" alt="" /></div>
              <div class="box">
                <div class="tit">蓝莓的魔力</div>
                <div class="desc">
                  蓝莓是无限发行的级别，象征着作品的普及与传播。
                </div>
                <i class="arr"><right-outlined /></i>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <div class="row-a2">
      <div class="wp1630">
        <div class="m-txtImgb1">
          <div class="col-r">
            <div class="txt">
              <div class="tit">价值<br />是Silentberry的目标</div>
              <div class="desc">
                同时也为更多读者提供了进入的机会。低门槛出版模式只需少数的支持者即可产生收入，作者在图书发行的早期即可获取收益，并随着不断的发行逐渐增加收益。
              </div>
              <div class="r">
                <NuxtLink to="/" class="m-btnb1">查看详情</NuxtLink>
              </div>
              <div class="c"></div>
            </div>
          </div>
          <div class="col-l">
            <div class="pic">
              
              <div class="pic-txt">
                <div class="line">
                  <p>金浆果收益分配：</p>
                  <p>作者 / 平台</p>
                </div>
                <div class="line">
                  <p>银浆果收益分配：</p>
                  <p>金浆果持有者 / 作者</p>
                </div>
                <div class="line">
                  <p>铜浆果收益分配：</p>
                  <p>金浆果持有者 / 银浆果持有者 / 作者 / 平台</p>
                </div>
                <div class="line">
                  <p>蓝莓收益分配：</p>
                  <p>金浆果持有者 / 银浆果持有者 / 铜浆果持有者 / 作者 / 平台</p>
                </div>
              </div>
              <img src="/images/c-img1.png" alt="" />
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="row-a3">
      <div class="wp1630">
        <div class="m-txtImgb2">
          <div class="col-l">
            <div class="txt">
              <div class="tit">生命力<br />是Silentberry的愿景</div>
              <div class="desc">
                通过创新和技术，我们致力于将图书版权转化为具有价值
                增值和唯一性的数字资产。<br />
                Silentberry的金银铜浆果不仅具有版权收益权，作者还能
                不断升级，添加更多的价值属性，让每一本图书都充满生
                命力和无限可能。
              </div>
              <div class="l">
                <NuxtLink to="/" class="m-btnb1">查看详情</NuxtLink>
              </div>
              <div class="c"></div>
            </div>
          </div>
          <div class="col-r">
            <div class="pic"><img src="/images/c-img2.png" alt="" /></div>
          </div>
        </div>
      </div>
    </div>
    <!-- 常见问题 -->
    <div class="row-a4">
      <div class="wp1630">
        <div class="g-titb1">
          <div class="l">
            <div class="h3">常见问题</div>
          </div>
          <div class="r">
            <NuxtLink to="/question" class="m-btnb1">查看全部</NuxtLink>
          </div>
        </div>
        <div class="m-listb2">
          <div @click="gotoInfo(child)" class="link" v-for="(child, cindex) in list_wt" :key="cindex">
            {{ child.ask }}
            <i  class="arr"><right-outlined /></i>
          </div>
        </div>
      </div>
    </div>
    <FootCookie />
  </div>
</template>
<script setup>
import Swiper from "swiper";
import "swiper/css/swiper.css";
import request from '~/services/request'
import { RightOutlined } from '@ant-design/icons-vue';
import { RouterLink, RouterView, useRouter } from 'vue-router'
const router = useRouter()
import { reactive, ref, onMounted, onBeforeUnmount } from 'vue';
const initBannerSwiper = () => {
  new Swiper("#bannerSwiper", {
    speed: 800,
    // loop: true,
    /* autoplay: {
        delay: 3000,
        stopOnLastSlide: false,
        disableOnInteraction: false,
      }, */
    pagination: {
      el: '#bannerSwiper .swiper-pagination',
      clickable: true,
    },
    /* navigation: {
      nextEl: '#bannerSwiper .swiper-button-next',
      prevEl: '#bannerSwiper .swiper-button-prev',
    }, */
  });
};
function gotoInfo(obj){
  if(obj.id){
    router.push('/questionDetails?id='+obj.id)
  }else{
    router.push('/questionDetails?ask='+obj)
  }
}
const initListSwiper = () => {
  new Swiper("#listSwiper", {
    speed: 800,
    slidesPerView: 4,
    spaceBetween: 20,
    // loop: true,
    /* autoplay: {
        delay: 3000,
        stopOnLastSlide: false,
        disableOnInteraction: false,
      }, */
    pagination: {
      el: '#listSwiper .swiper-pagination',
    },
    navigation: {
      nextEl: '.sw-btns .swiper-button-next',
      prevEl: '.sw-btns .swiper-button-prev',
    },
  });
};

const list_wt = ref([{
  label: '如何成为作者然后发布具有个人版权的书籍？',
  url: ''
}, {
  label: '通常需要在支持 NFT 交易的平台上进行购买。首先，你需要创建一个数字钱包，并确保其中有足够的加密货币用于购买？',
  url: ''
}, {
  label: '作者的书籍作品 支持多个地址吗？',
  url: ''
}, {
  label: '如何成为作者然后发布具有个人版权的书籍？',
  url: ''
}, {
  label: '通常需要在支持 NFT 交易的平台上进行购买。首先，你需要创建一个数字钱包，并确保其中有足够的加密货币用于购买？',
  url: ''
}])
//获取页面宽度
onMounted(async () => {
  request.get_issues()
  .then(res => {
    list_wt.value=res.results
  })
  setTimeout(() => {
    // 初始化banner轮播
    initBannerSwiper();

  }, 100);
  

  
  // 给header添加class
  if(document.documentElement.clientWidth>1199){
    document?.querySelector('.pagebox').classList.add('page-home');
  }

  console.log(request)
});

// 页面销毁时需要执行的操作
onBeforeUnmount(() => {
  if(document.documentElement.clientWidth>1199){

    document?.querySelector('.pagebox').classList.remove('page-home');
  }
});

</script>

<style lang='css' scoped>
</style>